import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import { Role } from '@/utils/types.d';
import type { ProDescriptionsItemProps } from '@ant-design/pro-components';
import { ModalForm, ProFormText, ProDescriptions } from '@ant-design/pro-components';
import { message } from 'antd';
import React, { useState } from 'react';
import { recreateApiInfo } from '../service';
import type { UserTableListItem } from '../types';

export default (props: { user: UserTableListItem; text?: string; reload: () => void }) => {
  const { user, text, reload } = props;
  const [secretVisible, setSecretVisible] = useState<boolean>(false);
  const modalTitle: React.ReactNode =
    user.role === Role.STAFF ? (
      <div>
        {user.userName}
        <small style={{ color: 'gray' }}>({user.ownerName})</small>
      </div>
    ) : (
      <span>{user.userName}</span>
    );
  const primaryColumns: ProDescriptionsItemProps<UserTableListItem>[] = [
    {
      title: '用户账号',
      key: 'text',
      dataIndex: 'account',
    },
    {
      title: '所属公司',
      key: 'text',
      dataIndex: 'ownerName',
      render: (_, record) =>
        record.ownerName ? <span>{record.ownerName}</span> : <PlaceHolderCpn text="系统" />,
    },
    {
      title: '创建时间',
      key: 'date',
      dataIndex: 'createTime',
      valueType: 'dateTime',
    },
    {
      title: '电子邮箱',
      key: 'text',
      dataIndex: 'email',
      render: (_, record) => record.email || <PlaceHolderCpn text="暂无数据" />,
    },
  ];
  const apiColumns: ProDescriptionsItemProps<UserTableListItem>[] = [
    {
      title: 'ApiKey',
      key: 'text',
      dataIndex: 'apiKey',
    },
    {
      title: 'ApiSecret',
      key: 'text',
      dataIndex: 'apiSecret',

      render: (t) => (
        <div>
          <span style={{ display: 'inline-block', marginRight: '5px' }}>
            {secretVisible ? t : <a onClick={() => setSecretVisible(true)}>显示</a>}
          </span>
          <ModalForm
            width="30vw"
            layout="horizontal"
            title="重置ApiSecret"
            trigger={<a>重置</a>}
            onFinish={async (values) => {
              if (!values.pwd) {
                message.warn({ key: 'up_key', content: '请输入您的密码!' });
                return false;
              }
              const res = await recreateApiInfo(user._id, values.pwd);
              if (!res.success) {
                message.error({ key: 'up_key', content: res.message });
                return false;
              }
              reload();
              message.success({ key: 'up_key', content: res.message });
              return true;
            }}
            modalProps={{
              destroyOnClose: true,
            }}
          >
            <ProFormText.Password
              required
              label="请输入密码"
              name="pwd"
              placeholder="请输入您的密码"
            />
          </ModalForm>
        </div>
      ),
    },
  ];
  return (
    <ModalForm
      title={modalTitle}
      width="65vw"
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setSecretVisible(false);
        },
        style: {
          minWidth: '1000px',
        },
      }}
      trigger={<a>{text || '详情'}</a>}
      submitter={false}
    >
      <ProDescriptions title="基本信息" column={3} columns={primaryColumns} dataSource={user} />
      {user.role == Role.ENTERPRISE && (
        <ProDescriptions column={2} title="接口信息" dataSource={user} columns={apiColumns} />
      )}
    </ModalForm>
  );
};
